<template>
    <div style="height: 60px;background-color: #fff;padding: 10px 20px">
        <span style="line-height: 60px;font-size: 20px">用户管理</span>
        <el-button @click="add_button" type="primary" style="float: right;margin-top: 15px">新建用户</el-button>
    </div>
  <!--新建用户弹窗-->
  <!-- 关闭之前先调用handleClose方法来处理弹窗的关闭问题 -->
    <el-dialog :title="dialog_title"
               style="width: 1000px;padding: 40px"
               v-model="dialog_visible"
               :before-close="handleClose">
        <el-form label-position="top" :rules="save_user_form_rules" :model="save_user_form" ref="formRef">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="save_user_form.username" placeholder="请输入用户名" :disabled="save_user_form.id"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input  v-model="save_user_form.email" placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="职级" prop="level">
                                <el-select v-model="save_user_form.level" placeholder="请选择"  @change="load_leader">
                                    <el-option v-for="item in level_option" :label="item.name" :value="item.level"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="直属领导" prop="parentId">
                                <el-select v-model="save_user_form.parentId" placeholder="请选择">
                                    <el-option v-for="item in leader_option" :label="item.username" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="save_user_form.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model="save_user_form.age" placeholder="请输入年龄"></el-input>
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="性别" prop="gender">
                                <el-radio-group v-model="save_user_form.gender">
                                    <el-radio value="1" border style="margin: 0">男</el-radio>
                                    <el-radio value="0" border style="margin: 0">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="用户状态" prop="status">
                                <el-radio-group v-model="save_user_form.status">
                                    <el-radio value="1" border style="margin: 0">启用</el-radio>
                                    <el-radio value="0" border style="margin: 0">禁用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button @click="save_user" type="primary">保存</el-button>
        </template>
    </el-dialog>
  <!-- 用户搜索卡片 -->
    <el-card :inline="true" style="margin: 20px;height: 70px">
        <el-form :inline="true">
            <el-form-item leable="用户搜索" style="width:220px" ref="">
                <el-input v-model="search_user_form.username" placeholder="请输入用户名" @keydown.enter="load_user"></el-input>
            </el-form-item>
            <el-form-item label="用户状态" style="width:220px">
                <el-select v-model="search_user_form.status" placeholder="请选择用户状态" @change="load_user">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item leable="用户搜索" style="width:220px">
                <el-button @click="reset_search">重置</el-button>
                <el-button @click="load_user" type="primary">查询</el-button>
            </el-form-item>

        </el-form>

    </el-card>
  <!-- 用户表格卡片 -->
    <el-card style="margin: 20px;overflow: auto">
        <el-table :data="user_arr" height="580px">
            <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
            <el-table-column prop="username" label="用户名" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="createTime" label="加入时间" align="center"></el-table-column>
            <el-table-column prop="status" label="用户状态" align="center">
                <template #default="scope">
                    <el-switch active-value="1" inactive-value="0" v-model="scope.row.status" @change="change_status(scope.row.id,scope.row.status)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button link type="primary" :disabled="scope.row.level==='40'"
                               @click="reset_password(scope.row.id)">密码重置</el-button>
                    <el-button link type="primary" :disabled="scope.row.level==='40'"
                               @click="edit_user(scope.row)">编辑</el-button>
                    <el-button link type="primary" :disabled="scope.row.level==='40'"
                               @click="delete_user(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const dialog_title = ref('新增员工')
const dialog_visible = ref(false)
const save_user_form = ref({username:'',email:'',level:'',parentId:'',phone:'',age:'',status:'',gender:''})
const level_option = ref([{name:'员工',level:'10'},{name:'经理',level:'20'},{name:'总监',level:'30'},{name:'总裁',level:'40'}])
const leader_option = ref([])
const search_user_form = ref({username:'',status:''})
const user_arr = ref([])
const formRef = ref(null)
const add_button = ()=>{
    dialog_visible.value=true
    dialog_title.value = '新增员工'

}
const handleClose = ()=>{
    if(confirm('确认关闭吗')){
        save_user_form.value={username:'',email:'',level:'',parentId:'',phone:'',age:'',status:'',gender:''}
        dialog_visible.value=false
        leader_option.value=[]
        // 清除表单验证状态，可选链操作符：?. 来确保在 formRef 未定义时不会抛出错误。
        formRef.value?.resetFields();
        formRef.value?.clearValidate();
    }
}

const save_user = ()=>{
    formRef.value.validate((valid)=>{
        if(!valid){
            ElMessage.error('请检查输入的信息')
        }else{
            save_user_form_rules.value.
            console.log(save_user_form.value)
            let data = qs.stringify(save_user_form.value)
            axios.post(BASE_URL+'/v1/user/save',data)
                .then((response)=>{
                    if(response.data.code===2000){
                        ElMessage.success('保存成功')
                        dialog_visible.value=false
                        save_user_form.value={username:'',email:'',level:'',parentId:'',phone:'',age:'',status:'',gender:''}
                        load_user()
                    }else{
                        ElMessage.error(response.data.msg)
                    }
                })
        }
    })

}

const load_leader = ()=>{
    let level = parseInt(save_user_form.value.level)+10
    axios.get(BASE_URL+'/v1/user/select?level='+level)
        .then((response)=>{
            if(response.data.code===2000){
                leader_option.value = response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}

const reset_search = ()=>{
    search_user_form.value={username:'',status:''}
    load_user()
}
const load_user = ()=>{
    let data = qs.stringify(search_user_form.value)
    axios.get(BASE_URL+'/v1/user/select?'+data)
        .then((response)=>{
            if(response.data.code===2000){
                user_arr.value=response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}
const reset_password = (id)=>{
    axios.post(BASE_URL+'/v1/user/resetPassword/'+id)
        .then((response)=>{
            if(response.data.code===2000){
                ElMessage.success('密码重置成功')
            }else{
                ElMessage.error(response.data.msg)
            }

        })
}

const edit_user = (row)=>{
    dialog_visible.value=true
    dialog_title.value='修改用户'
    //save_user_form.value = row
    axios.get(BASE_URL+'/v1/user/selectById/'+row.id)
        .then((response)=>{
            if(response.data.code===2000){
                save_user_form.value=response.data.data
            }else{
                ElMessage.error(response.data.msg)
            }
        })

}
const delete_user = (id)=>{
    if(confirm('确认删除吗')){
        axios.post(BASE_URL+'/v1/user/deleteById/'+id)
            .then((response)=>{
                if(response.data.code===2000){
                    ElMessage.success('删除成功')
                    load_user()
                }else{
                    ElMessage.error(response.data.msg)
                }
            })
    }
}



onMounted(()=>{
    load_user()
})

const change_status = (id,status)=>{
    axios.post(BASE_URL+'/v1/user/updateStatus/'+id+'/'+status)
        .then((response)=>{
            if(response.data.code===2000){
                ElMessage.success('状态修改成功')
            }else{
                ElMessage.error(response.data.msg)
            }
        })
}

let save_user_form_rules ={
    username:[
        {required:'true',message:'用户名不能为空',trigger:'blur'},
        {pattern:/^([a-zA-Z0-9_]|[\u4e00-\u9fa5]){2,20}$/,message:'用户名必须是3-20位的字母、数字、下划线、中文',trigger:'blur'}
    ],
    email:[
        {required:'true',message:'邮件不能为空',trigger:'blur'},
        {pattern:/^[a-zA-Z0-9_]+@[A-Za-z0-9]+(\.[a-zA-Z]+)+$/,message:'邮箱格式不正确',trigger:'blur'}
    ],
    level:[
        {required:'true',message:'职级不能为空',trigger:'blur'},
    ],
    phone:[
        {required:'true',message:'电话不能为空',trigger:'blur'},
        {pattern:/^1[3456789]\d{9}$/,message:'手机号格式不正确',trigger:'blur'}
    ],
    age:[
        {required:'true',message:'年龄不能为空',trigger:'blur'},
        {pattern:/^\d*$/,message:'年龄必须是数字',trigger: 'blur'}
    ],
    gender:[
        {required:'true',message:'性别不能为空'}
    ],
    status:[
        {required:'true',message:'状态不能为空'}
    ]
}


</script>


<style scoped>

</style>